import React, { useState } from 'react'
import './sqgl.less'
export default function SQGridList(props) {
    const [current, setCurrent] = useState(0)
    const changeSelect = (index,key) => {
        setCurrent(index)
        props.onItemChange(key)
    }
    return (
        <div className="SQGridList">
            <h4>{props.title}</h4>
            <div className="list flex">
                {
                    props.data.map((item, index) => {
                        return <div key={item.kay} onClick={() => changeSelect(index,item.key)} className={['list-btn', index === current ? 'active' : ''].join(' ')}>{item.zh}{item.value}</div>
                    })
                }
            </div>

        </div>
    )
}
